<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米商城产品展示效果</title>
    <style>
      /*  */
      body {
        background-color: #ddd;
      }
      body,
      ul,
      p {
        padding: 0;
        margin: 0;
      }
      ul {
        list-style: none;
      }
      a {
        color: initial;
        text-decoration: none;
      }
      /*  */
      .content {
        height: 600px;
        width: 1080px;
        margin: 50px auto 0;

        .left {
          height: 600px;
          width: 200px;
          float: left;
        }

        .right {
          height: 600px;
          width: 860px;
          float: right;

          ul {
            li:nth-child(4n) {
              margin-right: 0px;
            }
            li:nth-last-child(1) {
              height: 135px;
              margin-right: 0px;
              img {
                position: relative;
                top: 30px;
                left: 50px;
              }
            }
            li:nth-last-child(2) {
              height: 135px;
            }
            li {
              height: 290px;
              width: 200px;
              background-color: #fff;
              float: left;
              margin-right: 20px;
              margin-bottom: 20px;
              box-sizing: border-box;
              p {
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              p.goods-name {
                font-size: 16px;
              }
              p.goods-describe {
                font-size: 14px;
                color: rgba(162, 177, 174, 0.89);
                padding: 0 10px;
              }
              p.goods-price {
                font-size: 14px;
                margin-top: 10px;
                color: rgba(255, 123, 0, 0.89);
              }
              .li-right {
                float: right;
                height: 135px;
                width: 135px;
              }
            }
          }
        }
      }
      .clearfix {
        content: "";
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="content clearfix">
      <div class="left">
        <a href="https://www.baidu.com/" target="_blank">
          <img
            src="images/mi00.webp"
            alt=""
            style="width: 200px; height: 600px"
          />
        </a>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="#">
              <img src="images/mi01.webp" alt="" style="width: 200px" />
              <p class="goods-name">Redmi Buds 6 青春版</p>
              <p class="goods-describe">
                42dB深度主动降噪 | 双麦AI通话抗风噪 | 12.4mm超大镀钛动圈
              </p>
              <p class="goods-price">139元</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/mi02.webp" alt="" style="width: 200px" />
              <p class="goods-name">Redmi Buds 6 青春版</p>
              <p class="goods-describe">
                42dB深度主动降噪 | 双麦AI通话抗风噪 | 12.4mm超大镀钛动圈
              </p>
              <p class="goods-price">139元</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/mi03.webp" alt="" style="width: 200px" />
              <p class="goods-name">Redmi Buds 6 青春版</p>
              <p class="goods-describe">
                42dB深度主动降噪 | 双麦AI通话抗风噪 | 12.4mm超大镀钛动圈
              </p>
              <p class="goods-price">139元</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/mi04.webp" alt="" style="width: 200px" />
              <p class="goods-name">Redmi Buds 6 青春版</p>
              <p class="goods-describe">
                42dB深度主动降噪 | 双麦AI通话抗风噪 | 12.4mm超大镀钛动圈
              </p>
              <p class="goods-price">139元</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/mi05.webp" alt="" style="width: 200px" />
              <p class="goods-name">Redmi Buds 6 青春版</p>
              <p class="goods-describe">
                42dB深度主动降噪 | 双麦AI通话抗风噪 | 12.4mm超大镀钛动圈
              </p>
              <p class="goods-price">139元</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/mi06.webp" alt="" style="width: 200px" />
              <p class="goods-name">Redmi Buds 6 青春版</p>
              <p class="goods-describe">
                42dB深度主动降噪 | 双麦AI通话抗风噪 | 12.4mm超大镀钛动圈
              </p>
              <p class="goods-price">139元</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/mi07.webp" alt="" style="width: 200px" />
              <p class="goods-name">Redmi Buds 6 青春版</p>
              <p class="goods-describe">
                42dB深度主动降噪 | 双麦AI通话抗风噪 | 12.4mm超大镀钛动圈
              </p>
              <p class="goods-price">139元</p>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="li-right">
                <img src="images/mi08.webp" alt="" height="135px" />
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="li-right">
                <img
                  src="images/circle-arrow.svg"
                  alt=""
                  height="60px"
                  width="60px"
                />
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
